---
title: Tabs
description: Easily create accessible, fully customizable tab interfaces, with robust focus management and keyboard navigation support.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="demo-components-headless-tabs" />

## Installation

<ComponentInstallation name="components-headless-tabs" />

## Usage

```tsx
<TabGroup>
  <TabList>
    <Tab index={0}>Account</Tab>
    <Tab index={1}>Password</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>Make changes to your account here.</TabPanel>
    <TabPanel>Change your password here.</TabPanel>
  </TabPanels>
</TabGroup>
```

## API Reference

### TabGroup

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/headless/tabs#tabgroup"
  text="Animate UI API Reference - TabGroup Primitive"
/>

<ExternalLink
  href="https://headlessui.com/react/tabs#tab-group"
  text="Headless UI API Reference - TabGroup"
/>
</div>

### TabList

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/headless/tabs#tablist"
  text="Animate UI API Reference - TabList Primitive"
/>

<ExternalLink
  href="https://headlessui.com/react/tabs#tab-list"
  text="Headless UI API Reference - TabList"
/>
</div>

### Tab

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/headless/tabs#tab"
  text="Animate UI API Reference - Tab Primitive"
/>

<ExternalLink
  href="https://headlessui.com/react/tabs#tab"
  text="Headless UI API Reference - Tab"
/>
</div>

### TabPanel

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/headless/tabs#tabpanel"
  text="Animate UI API Reference - TabPanel Primitive"
/>

<ExternalLink
  href="https://headlessui.com/react/tabs#tab-panel"
  text="Headless UI API Reference - TabPanel"
/>
</div>

<TypeTable
  type={{
    transition: {
      description: 'The transition of the TabPanel component.',
      type: 'Transition',
      required: false,
      default: '{ duration: 0.5, ease: "easeInOut" }',
    },
  }}
/>

### TabPanels

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/headless/tabs#tabpanels"
  text="Animate UI API Reference - TabPanels Primitive"
/>

<ExternalLink
  href="https://headlessui.com/react/tabs#tab-panels"
  text="Headless UI API Reference - TabPanels"
/>

<ExternalLink
  href="https://animate-ui.com/docs/primitives/effects/auto-height#autoheight"
  text="Animate UI API Reference - AutoHeight"
/>
</div>

<TypeTable
  type={{
    mode: {
      description:
        'The mode of the TabPanels component. The auto-height mode (default) dynamically measures the content to adjust the height, resulting in smoother and more natural animations that integrate seamlessly with surrounding elements. The layout mode relies on Motion’s layout transitions, offering better performance, but the resizing may appear less fluid depending on the content.',
      type: '"auto-height" | "layout"',
      required: false,
      default: '"auto-height"',
    },
    transition: {
      description: 'The transition of the TabPanels component.',
      type: 'Transition',
      required: false,
      default: '{ type: "spring", stiffness: 200, damping: 25 }',
    },
  }}
/>

## Credits

- [Headless Tabs](https://headlessui.com/react/tabs)
- Credit to [shadcn/ui](https://ui.shadcn.com/docs/components/tabs) for style inspiration.
